<template>
  <div class="cleaning_1">
    <div>
      <div style="position: absolute; top: 14px; left: 5px; color: #fff">
        <van-icon name="arrow-left" color="#ffffff" size="24" @click="back"></van-icon>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          height: 75px;
          letter-spacing: 5px;
        "
      >
        经营数据
      </div>
    </div>
    <van-tabs
      class="van_tab"
      lineColor="#ffffff"
      :scrollable="false"
      :list="tabList"
      @click="tabChange"
      title-active-color="#ffffff"
      title-inactive-color="#ffffff"
      background="none"
    >
      <van-tab :title="item.name" v-for="item in tabList" :key="item.name"></van-tab>
    </van-tabs>
    <div class="list_outside">
      <div class="list">
        <div class="list_head">
          <div style="width: 80%; display: flex; align-items: center">
            <van-icon name="calendar-o" color="#A6A6A6" size="20"></van-icon>
            <span style="margin: 5px">
              {{ timeValue[0] ? timeValue[0] + " 至 " + timeValue[1] : "请选择" }}
            </span>
          </div>
          <div>
            <van-icon @click="timeShow = true" name="calendar" color="#A6A6A6" size="28"></van-icon>
          </div>
        </div>
        <div class="list_team" v-if="JYdata.length">
          <div class="list_item" style="background-color: #e6f1ff">
            {{ JYdata[0].orderName }}
            <div>{{ JYdata[0].orderNum }}</div>
            <van-image
              class="img"
              width="35px"
              height="35px"
              :src="require('../../static/JYSJ/DDZS.png')"
              mode="widthFix"
            ></van-image>
          </div>
          <div class="list_item" style="background-color: #e5e5e5">
            {{ JYdata[1].orderName }}
            <div>{{ JYdata[1].orderNum }}</div>
            <van-image
              class="img"
              width="35px"
              height="35px"
              :src="require('../../static/JYSJ/YQX.png')"
              mode="widthFix"
            ></van-image>
          </div>
          <div class="list_item" style="background-color: #eaf5f6">
            {{ JYdata[2].orderName }}
            <div>{{ JYdata[2].orderNum }}</div>
            <van-image
              class="img"
              width="35px"
              height="35px"
              :src="require('../../static/JYSJ/YWC.png')"
              mode="widthFix"
            ></van-image>
          </div>
        </div>
        <div class="list_background">
          <van-image
            class="img"
            width="250px"
            height="250px"
            :src="require('../../static/JYSJ/BJ.png')"
            mode="widthFix"
          ></van-image>
        </div>
      </div>
    </div>
    <van-calendar
      closeOnClickOverlay
      v-model="timeShow"
      type="range"
      @confirm="confirm"
      @close="timeShow = false"
      color="#00BAAD"
      :min-date="minDate"
      :max-date="maxDate"
      :allow-same-day="true"
      :max-range="180"
    ></van-calendar>
  </div>
</template>

<script>
import moment from "moment"
import { getOrderTime } from "@/api/realAssets/icsharedstation/GLYapi/home.js"
import { getpersonalInformation, setpersonalInformation } from "../../common/RYXX"
export default {
  data() {
    return {
      title: "经营数据",
      JYdata: [],
      total: 0,
      orderStatus: "-1,1",
      postId: JSON.parse(getpersonalInformation()).postId,
      orderNumber: "", // 可接收订单编号手机号姓名
      timeValue: [], // 时间
      timeShow: false, // 时间组件弹出关闭
      today: "", // 今天
      sevenDaysAgo: "", // 七天前
      monthAgo: "", // 一个月前
      frontTime: "", // 开始日期
      backTime: "", // 结束日期
      minDate: new Date(moment().year(), 0, 1), // 最小日期
      maxDate: new Date(moment().year(), 11, 31), // 最大日期
      tabList: [
        {
          name: "7日内",
          day: "7"
        },
        {
          name: "30日内",
          day: "30"
        },
        {
          name: "自定义",
          day: ""
        }
      ]
    }
  },
  methods: {
    tabChange (item) {
      if (this.tabList[item].day.length) {
        this.frontTime = moment().subtract(this.tabList[item].day, "days").format("YYYY-MM-DD")
        this.backTime = moment().format("YYYY-MM-DD")
        this.timeValue = [this.frontTime, this.backTime]
        this.getLB()
      } else {
        this.timeShow = true
      }
    },
    getLB() {
      //获取菜单列表
      getOrderTime({
        userId: JSON.parse(getpersonalInformation()).userId,
        postId: JSON.parse(getpersonalInformation()).postId,
        frontTime: this.frontTime,
        backTime: this.backTime
      })
        .then((resXX) => {
          this.JYdata = resXX.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    confirm(e) {
      this.timeShow = false
      this.frontTime = moment(e[0]).format("YYYY-MM-DD")
      this.backTime = moment(e[1]).format("YYYY-MM-DD")
      this.timeValue = [this.frontTime, this.backTime]
      this.getLB()
    },
    back() {
      this.$router.back()
      // uni.navigateBack({
      //   delta: 1
      // })
    }
  },
  mounted() {
    this.frontTime = moment().subtract(7, "days").format("YYYY-MM-DD")
    this.backTime = moment().format("YYYY-MM-DD")
    this.timeValue = [this.frontTime, this.backTime]
    this.getLB()
  }
}
</script>

<style lang="less" scoped>
.cleaning_1 {
  height: 100vh;
  width: 100%;
  background: url("../../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}
.list_outside {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  height: calc(
    var(--real-vh, 1vh) * 100 - 100px - env(safe-area-inset-bottom) - env(safe-area-inset-top)
  );
  .list {
    // display: flex;
    .list_team {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 10px;
      .list_item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // text-align: center;
        height: 75px;
        width: 30%;
        font-size: 12px;
        border-radius: 5px;
        position: relative;
        div {
          font-size: 18px;
          color: black;
          font-weight: 600;
        }
        .img {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
    .list_background {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 320px;
    }
  }
}
.list_head {
  margin-top: 10px;
  color: #999999;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
}
.van_tab {
  --van-tabs-bottom-bar-color: #00baad;
}
</style>
